<template>
    <div class="banner-h5">
        <div class="top" @click="handleClick">
            <div class="left">
                <TKImage
                    class="call-icon"
                    :src="CallIcon"
                    width="16px"
                    height="16px"
                    :customStyle="CallIconStyle"
                />
                <span class="text"> {{ userListInfo.length }} {{ t('people on the call') }} </span>
            </div>
            <TKImage :src="ArrowsIcon" width="9px" height="9px" />
        </div>
        <div class="content-box" v-show="isShowContent">
            <div class="content">
                <div class="avatar-box">
                    <TKImage
                        v-for="userInfo in userListInfo"
                        :src="userInfo?.avatar"
                        :customStyle="avatarImgStyle"
                        :defaultSrc="defaultAvatarSrc"
                        fit="cover"
                        width="50px"
                        height="50px"
                    />
                </div>
                <div class="btn" @click.stop="handleJoinGroup">{{ t('join') }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from '../../../../../adapter-vue'
import { t } from '../../../../../TUICallService'
import { IUserInfo } from '../../../../../TUICallService/interface/index'
import TKImage from '../../../base/TKImage/TKImage.vue'
const CallIcon = 'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/common/call.svg'
const ArrowsIcon =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/common/arrows.svg'
const defaultAvatarSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/common/defaultAvatar.svg'

defineProps({
    userListInfo: {
        type: Array<IUserInfo>,
        default: []
    }
})
const CallIconStyle = ref({ margin: '8px 10px 8px 0px' })
const avatarImgStyle = ref({
    margin: '6px',
    borderRadius: '4px'
})
const isShowContent = ref<boolean>(false)
const emit = defineEmits(['joinGroupCall'])
const handleJoinGroup = () => {
    emit('joinGroupCall')
    isShowContent.value = false
}
const handleClick = () => {
    isShowContent.value = !isShowContent.value
}
</script>

<style lang="scss">
@import './JoinGroupCard.scss';
</style>
